<template>
    <div class="scrollBar-course" :id="[course]" v-if="barS">
        <div class="scrollBar-slider" :id="[slider]"  @mousedown="qus"></div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                top:0,
                pNode:"",
                cNode:"",
                course:'',
                slider:'',
                barS:false,
                real:{
                    top:0
                },
                client:{
                    x:0,
                    y:0
                },
                page:{
                    x:0,
                    y:0
                }
            }
        },
        mounted:function () {
            this.pNode=this.das.parent;
            this.cNode=this.das.child;
            this.course=this.das.courseN;
            this.slider=this.das.sliderN;
            this.speed=this.das.speed;
            setTimeout(()=>{ this.control()},10);
        },
        props:['das','change','reset'],
        watch:{
            change:function () {
                setTimeout(()=>{ this.control()},10);
            },
            reset:function () {
                this.real.top=parseInt(this.querCss(this.cNode).top);
                document.getElementById(this.slider).style.top=Math.abs(this.real.top*(this.querCss(this.course).boxH-this.querCss(this.slider).boxH))/(this.querCss(this.cNode).boxH-this.querCss(this.pNode).boxH)+'px';
            }
        },
        methods:{
            control:function () {
                this.addBar();
                this.initialize();
                setTimeout(()=>{this.addEvent()},10);
            },
            initialize:function () {
                document.getElementById(this.cNode).style.top='0px';
                if(navigator.userAgent.indexOf("Firefox")>0){
                    document.getElementById(this.pNode).removeEventListener('DOMMouseScroll',this.wheel);
                }else {
                    document.getElementById(this.pNode).removeEventListener('mousewheel',this.wheel);
                }
                document.getElementById('app').removeEventListener('mousemove',this.drop);
                document.getElementById('app').removeEventListener('mouseup ',this.clearDrop);
            },
            addEvent:function () {
                if(this.querCss(this.pNode).boxH<this.querCss(this.cNode).boxH){
                    // 添加事件
                    if(navigator.userAgent.indexOf("Firefox")>0){
                        document.getElementById(this.pNode).addEventListener('DOMMouseScroll',this.wheel);
                    }else {
                        document.getElementById(this.pNode).addEventListener('mousewheel',this.wheel);
                    }
                }
            },
            addBar:function () {  //调整滚动条位置初始化
                if(this.querCss(this.cNode).boxH>this.querCss(this.pNode).boxH){
                    this.barS=true;
                    setTimeout(()=>{
                        document.getElementById(this.slider).style.height=Math.pow(this.querCss(this.pNode).boxH,2)/this.querCss(this.cNode).boxH+'px';
                        if(((this.querCss(this.cNode).top/this.querCss(this.cNode).boxH)*this.querCss(this.course).boxH)<(this.querCss(this.slider).boxH)/2){
                            document.getElementById(this.slider).style.top='0px';
                        }else {
                            document.getElementById(this.slider).style.top=((this.querCss(this.cNode).top/this.querCss(this.cNode).boxH)*this.querCss(this.course).boxH)+'px';
                        }
                    },10)
                }else {
                    this.barS=false;
                }
            },
            querCss(node) {  //获取DOM属性
                return{
                    top:Number(window.getComputedStyle(document.getElementById(node),null).top.split("px")[0]),
                    left:Number(window.getComputedStyle(document.getElementById(node),null).left.split("px")[0]),
                    bottom:Number(window.getComputedStyle(document.getElementById(node),null).bottom.split("px")[0]),
                    right:Number(window.getComputedStyle(document.getElementById(node),null).right.split("px")[0]),
                    width:Number(window.getComputedStyle(document.getElementById(node),null).width.split("px")[0]),
                    height:Number(window.getComputedStyle(document.getElementById(node),null).height.split("px")[0]),
                    boxW:Number(document.getElementById(node).getBoundingClientRect().width),
                    boxH:Number(document.getElementById(node).getBoundingClientRect().height)
                }
            },
            wheel:function (el) {  //滚动事件
                if(el.detail){
                    if(el.detail>0){   //下滑
                        this.carry(1);
                    }else {
                        this.carry(0);
                    }
                }else {
                    if(el.wheelDelta>0){  //上滑
                        this.carry(0);
                    }else {
                        this.carry(1);
                    }
                }
            },
            carry:function (el) {
//                var Otop=Math.abs(this.querCss(this.cNode).top);
//                if(el==1){
//                    if(this.querCss(this.cNode).top>-Math.abs(this.querCss(this.cNode).boxH-this.querCss(this.pNode).boxH-this.speed)){
//                        document.getElementById(this.cNode).style.top=this.querCss(this.cNode).top-this.speed+"px";
//                        Otop=Otop+this.speed;
//                    }else {
//                        document.getElementById(this.cNode).style.top=-Math.abs(this.querCss(this.cNode).boxH-this.querCss(this.pNode).boxH);
//                        Otop=Math.abs(this.querCss(this.cNode).boxH-this.querCss(this.pNode).boxH);
//                    }
//                }else{
//                    if(this.querCss(this.cNode).top>-this.speed){
//                        document.getElementById(this.cNode).style.top='0px';
//                        Otop=0;
//                    }else {
//                        document.getElementById(this.cNode).style.top=this.querCss(this.cNode).top+this.speed+"px";
//                        Otop=Otop-this.speed;
//                    }
//                }
                if(el==1){
                    this.real.top-=this.speed;
                    if(this.real.top<(this.querCss(this.pNode).boxH-this.querCss(this.cNode).boxH)){
                        this.real.top=this.querCss(this.pNode).boxH-this.querCss(this.cNode).boxH
                    }
                }else{
                    this.real.top+=this.speed;
                    if(this.real.top>0){
                        this.real.top=0;
                    }
                }
                document.getElementById(this.cNode).style.top=this.real.top+'px';
                document.getElementById(this.slider).style.top=Math.abs(this.real.top*(this.querCss(this.course).boxH-this.querCss(this.slider).boxH))/(this.querCss(this.cNode).boxH-this.querCss(this.pNode).boxH)+'px';
            },
            drop:function (e) {  //拖拽滚动条
                if(e.pageY>this.page.y){
                    document.getElementById(this.slider).style.top=parseInt(this.top+Math.abs(this.page.y-e.pageY))+'px';
                }else {
                    document.getElementById(this.slider).style.top=parseInt(this.top-Math.abs(this.page.y-e.pageY))+'px';
                }
                if(this.querCss(this.slider).top<0){
                    document.getElementById(this.slider).style.top='0px';
                }else if(this.querCss(this.slider).top>parseInt(this.querCss(this.course).boxH-this.querCss(this.slider).boxH)){
                    document.getElementById(this.slider).style.top=parseInt(this.querCss(this.course).boxH-this.querCss(this.slider).boxH)+'px';
                }
                document.getElementById(this.cNode).style.top=(this.querCss(this.slider).top*(this.querCss(this.pNode).boxH-this.querCss(this.cNode).boxH))/(this.querCss(this.course).boxH-this.querCss(this.slider).boxH)+'px';
            },
            clearDrop:function () {
                 document.getElementById('app').removeEventListener('mousemove',this.drop);
            },
            qus:function (e) {  //点击获取高度
                this.top=this.querCss(this.slider).top;
                this.page.x=Number(e.pageX);
                this.page.y=Number(e.pageY);
                this.client.x=Number(e.clientX);
                this.client.y=Number(e.clientY);
                document.getElementById('app').addEventListener('mousemove',this.drop);
                document.getElementById('app').addEventListener('mouseup',this.clearDrop);
            }
        }
    }
</script>
<style>
    .scrollBar-course{
        position: absolute;
        height: 100%;
        width:10px;
        top:0px;
        right:1px;
        z-index:50;
    }
    .scrollBar-slider{
        background-color: #7ebde9;
        width:5px;
        position: absolute;
        top: 50px;
        left: 3px;
        height: 50px;
        border-radius: 2px;
        cursor:pointer;
    }
    .course{
        background-color: #12223b;
    }
    .slider{

    }
</style>